<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .changeColor{
            background: #444;
            color: #eee;
        }
    </style>
</head>
<body>

  <div id="app">
      <!-- 渲染模板 -->
      <h1>渲染模板</h1>
      <div>
          {{ message }}<span>{{date}} </span>
      </div>
      <!-- v-bind 指令（指令带有前缀 v-） -->
      <h1>v-bind:title 指令</h1>
      <div>
          <!-- 将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致 -->
          <span v-bind:title="title">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
      </div>
      <!-- 条件判断 -->
      <h1>条件判断</h1>
      <div>
          <p v-if="seen">YES</p>
          <p v-else>NO</p>

          <h1 v-if="type==='A'">A</h1>
          <h1 v-else-if="type==='B'">B</h1>
          <h1 v-else-if="type==='D'">D</h1>
          <h1 v-else>C</h1>
      </div>
      <!-- 循环语句-->
      <h1>循环语句</h1>
      <div>
          <ol>
              <li v-for="todo in todos">{{ todo.text }}</li>
          </ol>
      </div>
      <!-- 事件 -->
      <h1>click事件</h1>
      <div>
          <p>{{ eventText }}</p>
          <button v-on:click="reverseMessage">反转消息</button>
      </div>
      <!-- v-model 指令 -->
      <h1>v-model 指令</h1>
      <div>
          <div>
              输入框：
              <input v-model="modelText"> <span>{{ modelText }}</span>
          </div>
          <div>
              单选框：
              <input type="radio" name="sex" value="男" v-model="ym"/> 男
              <input type="radio" name="sex" value="女" v-model="ym"/> 女
              值：{{ ym }}
          </div>
          <div>
              下拉框：
              <select v-model="selected">
                  <!-- 苹果无法选择第一项 -->
                  <option value="" disabled>--请选择--</option>
                  <option>A</option>
                  <option>B</option>
                  <option>C</option>
              </select>
              <span>value:{{selected}}</span>
          </div>

      </div>
      <!-- 表达式 -->
      <h1>表达式</h1>
      <div>
          {{5+5}}<br>
          {{ ok ? 'YES' : 'NO' }}<br>
          {{ messageText.split('').reverse().join('') }}
          <div v-bind:id="'list-' + id">菜鸟教程</div>
      </div>
      <!-- v-html 指令 -->
      <h1>v-html 指令</h1>
      <div>
          <div v-html="htmlText"></div>
      </div>
      <!-- v-bind:class 指令 -->
      <h1>v-bind:class</h1>
      <div>
          <label for="r1">修改颜色</label>
          <input id="r1" type="checkbox" v-model="use" >
          <br><br>
          <div v-bind:class="{'changeColor': use}">
              v-bind:class 指令
          </div>
      </div>
      <!-- v-once 指令  -->
      <h1>v-once 指令(一次性插值)</h1>
      <div>
          <span v-once>{{ onceMsg }}</span>
      </div>
      <!-- v-html -->
      <h1>h-html指令</h1>
      <div>
          <span>{{ rawHtml }}</span>
          <span v-html="rawHtml"></span>
      </div>
      <!-- v-bind指令 -->
      <h1>attribute用v-bind代替</h1>
      <div>
          <div v-bind:id="dynamicId"></div>
          <button v-bind:disabled="isButtonDisabled">Button</button>
      </div>
      <!--  -->
      <h1></h1>
      <div>

      </div>
  </div>

  <script type="text/javascript" src="../../lib/vue/2.6.14/vue.js"></script>
  <script type="text/javascript">
    var app = new Vue({
        el: "#app",
        // 数据区
        data: {
            message: '当前时间： ',
            date: new Date().toLocaleString(),
            title: '页面加载于 ' + new Date().toLocaleString(),
            seen: false,
            type: 's',
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ],
            eventText: 'Hello Vue.js!',
            modelText: 'Hello Vue!',
            ok: true,
            messageText: 'messageText',
            id : 1,
            htmlText: '<h2>htmlText</h2>',
            use: false,
            ym: '女',
            selected: '',
            onceMsg: '一次性',
            rawHtml: '<h3 style="color:#1E9FFF">h3:h-html指令</h3>',
            dynamicId: '123456789',
            isButtonDisabled: undefined,
        },
        // 方法区
        methods: {
            reverseMessage: function () {
                this.eventText = this.eventText.split('').reverse().join('')
            }
        }
    })
    setInterval(function (){
        app.seen = !app.seen
        app.date = new Date().toLocaleString()
    },1000);
  </script>
</body>
</html>